import React, { useContext } from "react";
import classNames from "classnames";
import loadingIcon from "./assets/loading.svg";
import { ThemeContext } from "../theme";
import type { ButtonProps } from "./type";

export default function Button({
  type = "default",
  htmlType = "button",
  text,
  children,
  loading = false,
  disabled = false,
  onClick,
  className,
  style,
}: ButtonProps) {
  const { fontSize } = useContext(ThemeContext);

  return (
    <button
      className={classNames(
        "ct0-button",
        `ct0-button-theme-fz${fontSize}`,
        `${type}`,
        disabled && "disabled",
        loading && "loading",
        className
      )}
      type={htmlType}
      onClick={() => !disabled && !loading && onClick?.()}
      style={style}
    >
      {text || children}
      {loading && (
        <span className="ct0-button-loading" role="loading">
          <img src={loadingIcon} />
        </span>
      )}
    </button>
  );
}
